
.sites-dropdown {
	&.is-open {
		height: 69px;
		.gridicons-chevron-down {
			transform: rotate( 180deg );
		}
	}

	.gridicons-chevron-down {
		align-self: center;
		color: var( --color-neutral-20 );
		flex-grow: 0;
		flex-shrink: 0;
		margin-right: 16px;
		transition: transform 0.15s cubic-bezier( 0.175, 0.885, 0.32, 1.275 ), color 0.2s ease-in;
	}
}

.sites-dropdown__wrapper {
	background: var( --color-surface );
	border: 1px solid var( --color-neutral-10 );
	border-width: 1px;
	border-radius: 4px;
	margin: 0;
	overflow: hidden;
	position: relative;
	width: 300px;
	transition: all 0.2s ease-in;
	z-index: 1;

	@include breakpoint-deprecated( '<660px' ) {
		width: 100%;
	}

	.has-multiple-sites &:hover {
		border-color: var( --color-neutral-20 );
		box-shadow: 0 1px var( --color-neutral-20 );
	}
}

.sites-dropdown.is-open .sites-dropdown__wrapper {
	position: relative;
	z-index: z-index( 'root', '.sites-dropdown.is-open .sites-dropdown__wrapper' );
	margin: 0;
}

.sites-dropdown__selected {
	display: flex;

	.has-multiple-sites & {
		cursor: pointer;
	}

	.is-open & {
		border-bottom: 1px solid var( --color-neutral-0 );
	}

	&:hover {
		.gridicons-chevron-down,
		.gridicons-chevron-up {
			color: var( --color-neutral-50 );
		}
	}
}

.sites-dropdown .site-selector {
	padding: 0;
	position: static;
	overflow-y: auto;

	&.is-large {
		margin-top: 50px;
	}
}

.sites-dropdown .site-selector__sites {
	max-height: 30vh;
	border-radius: 0 0 2px 2px;
}

.sites-dropdown .site-selector .search {
	position: absolute;
	top: 67px;
	left: 0;
	right: 0;
}

.sites-dropdown .site-selector .search input {
	margin: 0;
	background-color: var( --color-surface );
}

.sites-dropdown .site-selector .site {
	flex-grow: 1;
}
